<template>
  <div id="input">
    <el-row>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </el-row>
    <el-row>
      <el-input placeholder="请输入内容" v-model="input1" :disabled="true"></el-input>
    </el-row>
    <el-row>
      <el-input placeholder="请输入内容" v-model="input10" clearable></el-input>
    </el-row>
    <el-row>
      <el-input placeholder="请输入内容" v-model="input11" show-password></el-input>
    </el-row>
    <el-row>
      <div class="demo-input-suffix">
        属性方式：
        <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"></el-input>
        <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input21"></el-input>
      </div>
      <div class="demo-input-suffix">
        slot方式
        <el-input placeholder="请选择日期" v-model="input22"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input>
        <el-input placeholder="请选择日期" v-model="input23"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      </div>
    </el-row>
    <el-row>
      <el-input type='textarea' :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
    </el-row>
    <el-row>
      <el-input placeholder="请输入 内容" v-model="input3">
        <template slot="prepend">Http://</template>
      </el-input>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      input: '',
      input1: '',
      input10: '',
      input11: '',
      input2: '',
      input21: '',
      input22: '',
      input23: '',
      textarea: ''
    }
  }
}
</script>
